<template>
  <el-card style="position: center;width:50%;margin-top: 50px;margin-left: 25%">
    <div class="clearfix">
      <h2>
        <span>问卷答题</span>
      </h2>
    </div>
    <div style="text-align: center">
      <div v-for="(question,index) in questionData1" :key="index" style="margin-top: 15px">
        <h3>
          <span>问题：{{ question.name }}</span>
        </h3>

        <el-radio v-if="question.type == 1" v-model="resetForm.answerList1[index]" :rules="resetFormRules" label="1">{{ question.answer1 }}</el-radio>
        <el-radio v-if="question.type == 1" v-model="resetForm.answerList1[index]" :rules="resetFormRules" label="2">{{ question.answer2 }}</el-radio>
        <el-radio v-if="question.type == 1" v-model="resetForm.answerList1[index]" :rules="resetFormRules" label="3">{{ question.answer3 }}</el-radio>
        <el-radio v-if="question.type == 1" v-model="resetForm.answerList1[index]" :rules="resetFormRules" label="4">{{ question.answer4 }}</el-radio>

      </div>
      <div v-for="(question,index) in questionData2" :key="index" style="margin-top: 15px">
          <h3>
            <span>问题：{{ question.name }}</span>
          </h3>
          <el-checkbox-group v-model="resetForm.answerList2[index]" :rules="resetFormRules">
            <el-checkbox v-if="question.type == 2" label="1">{{ question.answer1 }}</el-checkbox>
            <el-checkbox v-if="question.type == 2" label="2">{{ question.answer2 }}</el-checkbox>
            <el-checkbox v-if="question.type == 2" label="3">{{ question.answer3 }}</el-checkbox>
            <el-checkbox v-if="question.type == 2" label="4">{{ question.answer4 }}</el-checkbox>
          </el-checkbox-group>
      </div>
      <div v-for="(question,index) in questionData3" :key="index" style="margin-top: 15px">
          <h3>
            <span>问题：{{ question.name }}</span>
          </h3>
          <textarea rows="3"
                    cols="50"
                    v-if="question.type == 3"
                    v-model="resetForm.answerList3[index]"
          >
					</textarea>
      </div>
    <div style="text-align: center;margin-top: 15px;margin-bottom: 15px">
      <el-button type="primary" @click="submit">提交</el-button>
    </div>
    </div>
  </el-card>
</template>
<script>
import request from "../../../request/request";
import {ElMessage} from "element-plus";

export default {
  name: "answer",
  data() {
    return {
      questionnaireId: 0,
      questionData1: [],
      questionData2: [],
      questionData3: [],
      answerList1: [],
      resetForm: {
        answerList1: [],
        answerList2: [],
        answerList3: [],
        questionID: []
      },
      Form:{
        questionnaireId: 0,
        answererId: ''
      },
      resetFormRules: {
        answerList1: [
          { required: true }
        ],
        answerList2: [
          { required: true }
        ],
        answerList3: [
          { required: true }
        ],
        questionID: [
          { required: true }
        ]
      },
      answerList2: [],
      answerList3: [],
      answererId: '',
      questionID:[],
      answerListMulti:[]
    }
  },
  created() {
    this.load()
  },
  methods: {
    load() {
      this.questionnaireId = this.$route.params.questionnaireId
      this.answererId = this.$route.params.answererId

      request.post("question/showQuestionByNaireId1", this.questionnaireId).then(res => {
        this.questionData1 = res.data
        console.log(this.questionData1)
      })
      request.post("question/showQuestionByNaireId2", this.questionnaireId).then(res => {
        this.questionData2 = res.data
        console.log(this.questionData2)
      })
      request.post("question/showQuestionByNaireId3", this.questionnaireId).then(res => {
        this.questionData3 = res.data
        console.log(this.questionData3)
      })
      request.post("question/getQuestionID",this.questionnaireId).then(res =>{
        this.questionID = res.data
      })
      //console.log(this.questionData)
    },
    submit() {
     /*request.post("questionnaireResult/submitQuestionnaire", this.answerList,this.questionID).then(res => {
        console.log(res)
      })*/
      //this.resetForm.add(this.answerList1)
      //this.resetForm.add(this.questionID)
      this.resetForm.questionID=this.questionID
      this.Form.questionnaireId = this.questionnaireId
      this.Form.answererId = this.answererId
       request.post("questionnaireResult/submitQuestionnaire",this.resetForm).then(res=>{
         console.log(res)
         ElMessage({
           message: '登录成功！',
           type: 'success',
         })
         this.update()
         this.setResultCount()
         this.$router.go(-3)
       })




    },
    update(){
      request.post("questionnaireResult/update",this.Form).then(res=>{
        console.log(res)
      })
    },
    setResultCount(){
      request.post("questionnaireResultCount/setResultcount").then(res =>{
        console.log(res)
      })
    }
  }
}
</script>
<style scoped>

</style>